﻿
@{
    ViewData["Title"] = "InvoiceSummary";
}

<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Invoice Summary</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/Dashboard/@Pages.Dashboard.Value"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Invoice</a></li>
                                    <li class="breadcrumb-item"><a href="#!">Invoice Summary</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <!-- [ Invoice-summary ] start -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Sales and Expenses</h5>
                                    </div>
                                    <div class="card-block">
                                        <div id="morris-bar-chart" style="height:300px"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Sales, Receipt and Dues</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="table-responsive">
                                            <table class="table table-hover m-0">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Sales</th>
                                                        <th>Receipt</th>
                                                        <th>Dues</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <th scope="row">Today</th>
                                                        <td>$250.00</td>
                                                        <td>Otto</td>
                                                        <td>@@mdo</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">This Week</th>
                                                        <td>$380.00</td>
                                                        <td>Thornton</td>
                                                        <td>@@fat</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">This Month</th>
                                                        <td>$450.00</td>
                                                        <td>the Bird</td>
                                                        <td>@@twitter</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">This Year</th>
                                                        <td>$600.00</td>
                                                        <td>the Bird</td>
                                                        <td>@@facebook</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Total</th>
                                                        <td>$600.00</td>
                                                        <td>the Bird</td>
                                                        <td>@@google</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Recent Orders</h5>
                                    </div>
                                    <div class="card-block invoice-summary">
                                        <div class="table-responsive">
                                            <table class="table table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Order No.</th>
                                                        <th>Product Name</th>
                                                        <th>Quantity</th>
                                                        <th>Price</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <th scope="row">1</th>
                                                        <td>54822</td>
                                                        <td>Product 1</td>
                                                        <td>2</td>
                                                        <td>
                                                            <label class="label label-md label-danger">$80.00</label>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">2</th>
                                                        <td>54823</td>
                                                        <td>Product 2</td>
                                                        <td>1</td>
                                                        <td>
                                                            <label class="label label-md label-success">$75.00</label>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">3</th>
                                                        <td>54824</td>
                                                        <td>Product 3</td>
                                                        <td>3</td>
                                                        <td>
                                                            <label class="label label-md label-warning">$99.00</label>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Invoice-summary ] end -->
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->

@section Styles{
    <!-- morris css -->
    <link rel="stylesheet" href="~/assets/plugins/chart-morris/css/morris.css">
}

@section Scripts{
    <!-- chart-morris Js -->
    <script src="~/assets/plugins/chart-morris/js/raphael.min.js"></script>
    <script src="~/assets/plugins/chart-morris/js/morris.min.js"></script>

    <script>
        $(document).ready(function() {
            setTimeout(function() {
                Morris.Bar({
                    element: 'morris-bar-chart',
                    data: [{
                        y: '2012',
                        a: 50,
                        b: 40,
                    }, {
                        y: '2013',
                        a: 75,
                        b: 65,
                    }, {
                        y: '2014',
                        a: 50,
                        b: 40,
                    }, {
                        y: '2015',
                        a: 75,
                        b: 65,
                    }, {
                        y: '2016',
                        a: 100,
                        b: 90,
                    }],
                    xkey: 'y',
                    barSizeRatio: 0.70,
                    barGap: 5,
                    resize: true,
                    responsive: true,
                    ykeys: ['a', 'b'],
                    labels: ['sales', 'Expenses'],
                    barColors: ["0-#1de9b6-#1dc4e9", "0-#899FD4-#A389D4"]
                });
            }, 700);
        });
    </script>
}

